<template>
  <div class="show-table">
    <div class="table-header">
      <slot name="tableHeader"></slot>
    </div>
    <el-table :data="dataList" stripe style="width: 100%" v-bind="otherConfig">
      <el-table-column v-if="isShowSelectCol" type="selection" width="55" />
      <el-table-column
        v-if="isShowIndexCol"
        type="index"
        width="55"
        label="#"
      />
      <template v-for="item in tableConfig" :key="item.label">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :min-width="item.minWidth || '150px'"
          :align="item.align || 'center'"
          show-overflow-tooltip
        >
          <template #default="scope">
            <slot :name="item.prop" :row="scope.row">
              {{ scope.row[item.prop] }}
            </slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div class="table-footer">
      <slot name="tableFooter">
        <el-pagination
          v-if="isShowPagination"
          :currentPage="pageInfo.offset + 1"
          :page-size="pageInfo.size"
          :page-sizes="[10, 20, 30]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </slot>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from "vue";
import { IShowTableConfigType, ITreeTableConfigType } from "../type/type";

export default defineComponent({
  emits: ["sizeChange", "currentChange"],
  props: {
    dataList: {
      type: Array,
      require: true
    },
    tableConfig: {
      type: Array as PropType<IShowTableConfigType[]>,
      require: true
    },
    isShowSelectCol: {
      type: Boolean,
      default: false
    },
    isShowIndexCol: {
      type: Boolean,
      default: false
    },
    listCount: {
      type: Number,
      default: 0
    },
    pageInfo: {
      type: Object,
      default: () => ({
        offset: 0,
        size: 10
      })
    },
    tableHeight: {
      type: String,
      default: ""
    },
    treeTableConfig: {
      type: Object as PropType<ITreeTableConfigType>,
      default: () => ({})
    },
    isShowPagination: {
      type: Boolean,
      default: true
    }
  },
  setup(props, { emit }) {
    const handleSizeChange = (size: number) => {
      emit("sizeChange", size);
    };
    const handleCurrentChange = (pageNum: number) => {
      emit("currentChange", pageNum);
    };
    const height = props.tableHeight ? { height: props.tableHeight } : {};
    const otherConfig = { ...height, ...props.treeTableConfig };
    return { handleSizeChange, handleCurrentChange, otherConfig };
  }
});
</script>

<style scoped lang="less">
.table-header {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  padding: 10px 0;
}
.table-footer {
  display: flex;
  flex-direction: row-reverse;
  padding: 10px 0;
}
</style>
